<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">
        辽宁省房地产市场监测系统 —— 开发建设
      </div>
      <div class="page-header-filtrate">
        <public-change-province-city
          :cityList="mapList"
          :currentCity="cityObj.code"
          @changeCity="changeCity"
        />
        <month-range-time-filtrate-public class="page-header-filtrate-month-range" :month-range="monthRange"
                                          @changeFiltrateTime="changeMonthRange"/>
      </div>
      <div class="back-home-btn" @click="router.go(-1)">返回首页</div>
    </div>
    <div class="main-content">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="module-item house-property-development-investment">
            <div class="module-item-title">
              <span>房地产开发投资</span>
              <el-tabs class="module-item-title-tabs" v-model="tabConfig.housePropertyDevelopmentInvestment"
                       @tab-change="changeTab($event, 'housePropertyDevelopmentInvestment')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <line-bar
                v-if="housePropertyDevelopmentInvestmentData.xAxisData?.length"
                ref="housePropertyDevelopmentInvestmentRef"
                :line-bar-data="housePropertyDevelopmentInvestmentData"
                :current-tab="tabConfig.housePropertyDevelopmentInvestment"
                class="h280"
                @click="fullSc('lineBar', housePropertyDevelopmentInvestmentData, 'top2Chart')"
              ></line-bar>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="module-item commodity-house-development-investment">
            <div class="module-item-title">
              <span>其中商品住宅开发投资</span>
              <el-tabs class="module-item-title-tabs" v-model="tabConfig.commodityHouseDevelopmentInvestment"
                       @tab-change="changeTab($event, 'commodityHouseDevelopmentInvestment')">
                <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value" :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <line-bar
                v-if="commodityHouseDevelopmentInvestmentData.xAxisData?.length"
                ref="commodityHouseDevelopmentInvestmentRef"
                :line-bar-data="commodityHouseDevelopmentInvestmentData"
                :current-tab="tabConfig.commodityHouseDevelopmentInvestment"
                class="h280"
                @click="fullSc('lineBar', commodityHouseDevelopmentInvestmentData, 'top2Chart')"
              ></line-bar>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30" class="bottom-content">
        <el-col :span="8">
          <el-row :gutter="30">
            <el-col :span="24">
              <div class="module-item every-city-house-property-development-investment-data-summarization">
                <div class="module-item-title"><span>各城市房地产开发投资数据汇总</span></div>
                <div class="module-item-content">
                  <single-bar v-if="everyCityHousePropertyDevelopmentInvestmentDataSummarizationData?.xAxisData?.length"
                              ref="everyCityHousePropertyDevelopmentInvestmentDataSummarizationRef"
                              :barData="everyCityHousePropertyDevelopmentInvestmentDataSummarizationData" class="h291"
                              @click="fullSc('singleBar', everyCityHousePropertyDevelopmentInvestmentDataSummarizationData)"
                  ></single-bar>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="24">
              <div class="module-item every-city-house-development-data-summarization">
                <div class="module-item-title">
                  <span>各城市房屋施工数据汇总</span>
                  <el-tabs class="module-item-title-tabs" v-model="tabConfig.everyCityHouseDevelopmentDataSummarization"
                           @tab-change="changeTab($event, 'everyCityHouseDevelopmentDataSummarization')">
                    <el-tab-pane v-for="(item, index) of commodityHouseTabs" :key="item.value"
                                 :label="item.label" :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content">
                  <multiple-bar
                    v-if="everyCityHouseDevelopmentDataSummarizationData.xAxisData?.length"
                    ref="everyCityHouseDevelopmentDataSummarizationRef"
                    :bar-data="everyCityHouseDevelopmentDataSummarizationData"
                    class="h291"
                    @click="fullSc('multipleBar', everyCityHouseDevelopmentDataSummarizationData)"
                  ></multiple-bar>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16" class="bottom-content-right">
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="module-item house-newly-started-acreage">
                <div class="module-item-title">
                  <span>房屋新开工面积</span>
                  <el-tabs class="module-item-title-tabs" v-model="tabConfig.houseNewlyStartedAcreage"
                           @tab-change="changeTab($event, 'houseNewlyStartedAcreage')">
                    <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value"
                                 :label="item.label" :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content">
                  <line-bar
                    v-if="houseNewlyStartedAcreageData.xAxisData?.length"
                    ref="houseNewlyStartedAcreageRef"
                    :line-bar-data="houseNewlyStartedAcreageData"
                    :current-tab="tabConfig.houseNewlyStartedAcreage"
                    class="h180"
                    @click="fullSc('lineBar', houseNewlyStartedAcreageData, 'right6Chart')"
                  ></line-bar>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="module-item commodity-house-newly-started-acreage">
                <div class="module-item-title">
                  <span>其中商品住宅新开工面积</span>
                  <el-tabs class="module-item-title-tabs" v-model="tabConfig.commodityHouseNewlyStartedAcreage"
                           @tab-change="changeTab($event, 'commodityHouseNewlyStartedAcreage')">
                    <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value"
                                 :label="item.label" :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content">
                  <line-bar
                    v-if="commodityHouseNewlyStartedAcreageData.xAxisData?.length"
                    ref="commodityHouseNewlyStartedAcreageRef"
                    :line-bar-data="commodityHouseNewlyStartedAcreageData"
                    :current-tab="tabConfig.commodityHouseNewlyStartedAcreage"
                    class="h180"
                    @click="fullSc('lineBar', commodityHouseNewlyStartedAcreageData, 'right6Chart')"
                  ></line-bar>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="module-item house-construction-acreage">
                <div class="module-item-title">
                  <span>房屋施工面积</span>
                  <el-tabs class="module-item-title-tabs" v-model="tabConfig.houseConstructionAcreage"
                           @tab-change="changeTab($event, 'houseConstructionAcreage')">
                    <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value"
                                 :label="item.label" :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content">
                  <line-bar
                    v-if="houseConstructionAcreageData.xAxisData?.length"
                    ref="houseConstructionAcreageRef"
                    :line-bar-data="houseConstructionAcreageData"
                    :current-tab="tabConfig.houseConstructionAcreage"
                    class="h180"
                    @click="fullSc('lineBar', houseConstructionAcreageData, 'right6Chart')"
                  ></line-bar>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="module-item commodity-house-construction-acreage">
                <div class="module-item-title">
                  <span>其中商品住宅施工面积</span>
                  <el-tabs class="module-item-title-tabs" v-model="tabConfig.commodityHouseConstructionAcreage"
                           @tab-change="changeTab($event, 'commodityHouseConstructionAcreage')">
                    <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value"
                                 :label="item.label" :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content">
                  <line-bar
                    v-if="commodityHouseConstructionAcreageData.xAxisData?.length"
                    ref="commodityHouseConstructionAcreageRef"
                    :line-bar-data="commodityHouseConstructionAcreageData"
                    :current-tab="tabConfig.commodityHouseConstructionAcreage"
                    class="h180"
                    @click="fullSc('lineBar', commodityHouseConstructionAcreageData, 'right6Chart')"
                  ></line-bar>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="module-item house-completed-acreage">
                <div class="module-item-title">
                  <span>房屋竣工面积</span>
                  <el-tabs class="module-item-title-tabs" v-model="tabConfig.houseCompletedAcreage"
                           @tab-change="changeTab($event, 'houseCompletedAcreage')">
                    <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value"
                                 :label="item.label" :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content">
                  <line-bar
                    v-if="houseCompletedAcreageData.xAxisData?.length"
                    ref="houseCompletedAcreageRef"
                    :line-bar-data="houseCompletedAcreageData"
                    :current-tab="tabConfig.houseCompletedAcreage"
                    class="h180"
                    @click="fullSc('lineBar', houseCompletedAcreageData, 'right6Chart')"
                  ></line-bar>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="module-item commodity-house-completed-acreage">
                <div class="module-item-title">
                  <span>其中商品住宅竣工面积</span>
                  <el-tabs class="module-item-title-tabs" v-model="tabConfig.commodityHouseCompletedAcreage"
                           @tab-change="changeTab($event, 'commodityHouseCompletedAcreage')">
                    <el-tab-pane v-for="(item, index) of currentMonthAccumulationTabs" :key="item.value"
                                 :label="item.label" :name="item.value"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content">
                  <line-bar
                    v-if="commodityHouseCompletedAcreageData.xAxisData?.length"
                    ref="commodityHouseCompletedAcreageRef"
                    :line-bar-data="commodityHouseCompletedAcreageData"
                    :current-tab="tabConfig.commodityHouseCompletedAcreage"
                    class="h180"
                    @click="fullSc('lineBar', commodityHouseCompletedAcreageData, 'right6Chart')"
                  ></line-bar>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :title="magnifyData.dialogTitle" :width="magnifyData.dialogWidth"
               :top="magnifyData.dialogTop" center>
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{fontSizeTimes: 2}"
        v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import lineBar from "@/components/housePropertyDevelopmentConstruction/lineBar.vue";
import singleBar from "@/components/housePropertyDevelopmentConstruction/singleBar.vue";
import multipleBar from "@/components/housePropertyDevelopmentConstruction/multipleBar.vue";

export default {
  components: {
    lineBar,
    singleBar,
    multipleBar
  }
}
</script>
<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

import publicChangeProvinceCity from "@/components/housePropertyDevelopmentConstruction/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/housePropertyDevelopmentConstruction/timeFiltratePublic.vue";

import {
  constructionGetReInvestment, // 房地产开发投资
  constructionGetNewStartedArea, // 房屋新开工面积
  constructionGetConstructionArea, // 房屋施工面积
  constructionGetCompletedArea, // 房屋竣工面积
  constructionGetCityReInvestment, // 各城市房地产开发投资数据汇总
  constructionGetCityConstructionArea, // 各城市房屋施工数据汇总
  constructionGetHouseReInvestment, // 其中商品住宅开发投资
  constructionGetHouseNewStartedArea, // 其中商品住宅新开工面积
  constructionGetHouseConstructionArea, // 其中商品住宅施工面积
  constructionGetHouseCompletedArea, // 其中商品住宅竣工面积
} from "@/api/housePropertyDevelopmentConstruction/index";

const route = useRoute();
const router = useRouter();

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  dialogTitle: '',
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: ''
})
const dialogRef = ref(null) // chart图放大-domref

const cityObj = ref({
  name: '',
  code: '210000'
}) // 地图-城市code信息
const mapList = ref([
  {name: '辽宁省', code: '210000'},
  {name: '沈阳市', code: '210100'},
  {name: '大连市', code: '210200'},
  {name: '鞍山市', code: '210300'},
  {name: '抚顺市', code: '210400'},
  {name: '本溪市', code: '210500'},
  {name: '丹东市', code: '210600'},
  {name: '锦州市', code: '210700'},
  {name: '营口市', code: '210800'},
  {name: '阜新市', code: '210900'},
  {name: '辽阳市', code: '211000'},
  {name: '盘锦市', code: '211100'},
  {name: '铁岭市', code: '211200'},
  {name: '朝阳市', code: '211300'},
  {name: '葫芦岛市', code: '211400'}
])
const monthRange = ref(null) // 月范围筛选
const currentMonthAccumulationTabs = [ // 当月&累计tabs
  {
    label: '当月',
    value: 1
  },
  {
    label: '累计',
    value: 2
  }
]
const commodityHouseTabs = [ // 商品房&商品住宅tabs
  {
    label: '商品房',
    value: 1
  },
  {
    label: '商品住宅',
    value: 2
  }
]
const tabConfig = ref({ // tabs-model
  housePropertyDevelopmentInvestment: 1, // 房地产开发投资
  commodityHouseDevelopmentInvestment: 1, // 其中商品住宅开发投资

  houseNewlyStartedAcreage: 1, // 房屋新开工面积
  commodityHouseNewlyStartedAcreage: 1, // 其中商品住宅新开工面积
  houseConstructionAcreage: 1, // 房屋施工面积
  commodityHouseConstructionAcreage: 1, // 其中商品住宅施工面积
  houseCompletedAcreage: 1, // 房屋竣工面积
  commodityHouseCompletedAcreage: 1, // 其中商品住宅竣工面积

  everyCityHouseDevelopmentDataSummarization: 1, // 各城市房屋施工数据汇总
})

const housePropertyDevelopmentInvestmentData = ref({ // 房地产开发投资-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '亿元',
  seriesName: '投资金额',
  chartConfig: {
    grid: {
      top: '20%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '房地产开发投资',
  sum: 76,
  tb: -15
})
const housePropertyDevelopmentInvestmentRef = ref(null) // 房地产开发投资-domref

const commodityHouseDevelopmentInvestmentData = ref({ // 其中商品住宅开发投资-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '亿元',
  seriesName: '投资金额',
  chartConfig: {
    grid: {
      top: '20%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '其中商品住宅开发投资',
  sum: 76,
  tb: -15
})
const commodityHouseDevelopmentInvestmentRef = ref(null) // 其中商品住宅开发投资-domref

const houseNewlyStartedAcreageData = ref({ // 房屋新开工面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '房屋新开工面积',
  sum: 76,
  tb: -15
})
const houseNewlyStartedAcreageRef = ref(null) // 房屋新开工面积-domref

const commodityHouseNewlyStartedAcreageData = ref({ // 其中商品住宅新开工面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '其中商品住宅新开工面积',
  sum: 76,
  tb: -15
})
const commodityHouseNewlyStartedAcreageRef = ref(null) // 其中商品住宅新开工面积-domref

const houseConstructionAcreageData = ref({ // 房屋施工面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '房屋施工面积',
  sum: 76,
  tb: -15
})
const houseConstructionAcreageRef = ref(null) // 房屋施工面积-domref

const commodityHouseConstructionAcreageData = ref({ // 其中商品住宅施工面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '其中商品住宅施工面积',
  sum: 76,
  tb: -15
})
const commodityHouseConstructionAcreageRef = ref(null) // 其中商品住宅施工面积-domref

const houseCompletedAcreageData = ref({ // 房屋竣工面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '房屋竣工面积',
  sum: 76,
  tb: -15
})
const houseCompletedAcreageRef = ref(null) // 房屋竣工面积-domref

const commodityHouseCompletedAcreageData = ref({ // 其中商品住宅竣工面积-data
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '万㎡',
  seriesName: '面积',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '其中商品住宅竣工面积',
  sum: 76,
  tb: -15
})
const commodityHouseCompletedAcreageRef = ref(null) // 其中商品住宅竣工面积-domref

const everyCityHousePropertyDevelopmentInvestmentDataSummarizationData = ref({ // 各城市房地产开发投资数据汇总-data
  xAxisData: [],
  seriesData: [],
  yAxisLeftLabel: '亿元',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '各城市房地产开发投资数据汇总'
})
const everyCityHousePropertyDevelopmentInvestmentDataSummarizationRef = ref(null) // 各城市房地产开发投资数据汇总-domref

const everyCityHouseDevelopmentDataSummarizationData = ref({ // 各城市房屋施工数据汇总-data
  xAxisData: [],
  legendData: ['新开工', '施工', '竣工'],
  barData: [],
  yAxisLeftLabel: '万㎡',
  chartConfig: {
    grid: {
      top: '25%',
    },
    dialogGrid: {
      top: '20%'
    }
  },
  dialogTitle: '各城市房屋施工数据汇总'
})
const everyCityHouseDevelopmentDataSummarizationRef = ref(null) // 各城市房屋施工数据汇总-domref

const changeCity = (cityCode) => { // 模块切换城市
  cityObj.value.code = cityCode
  initPage()
}

const changeMonthRange = (val) => { // 月范围筛选
  monthRange.value = val
  initPage()
}

const changeTab = (event, module) => { // 公共-tabs切换
  switch (module) {
    case 'housePropertyDevelopmentInvestment': // 房地产开发投资
      getHousePropertyDevelopmentInvestmentData();
      break;
    case 'commodityHouseDevelopmentInvestment': // 其中商品住宅开发投资
      getCommodityHouseDevelopmentInvestmentData();
      break;
    case 'houseNewlyStartedAcreage': // 房屋新开工面积
      getHouseNewlyStartedAcreageData();
      break;
    case 'commodityHouseNewlyStartedAcreage': // 其中商品住宅新开工面积
      getCommodityHouseNewlyStartedAcreageData();
      break;
    case 'houseConstructionAcreage': // 房屋施工面积
      getHouseConstructionAcreageData();
      break;
    case 'commodityHouseConstructionAcreage': // 其中商品住宅施工面积
      getCommodityHouseConstructionAcreageData();
      break;
    case 'houseCompletedAcreage': // 房屋竣工面积
      getHouseCompletedAcreageData();
      break;
    case 'commodityHouseCompletedAcreage': // 其中商品住宅竣工面积
      getCommodityHouseCompletedAcreageData();
      break;
    case 'everyCityHouseDevelopmentDataSummarization': // 各城市房屋施工数据汇总
      getEveryCityHouseDevelopmentDataSummarizationData();
      break;
  }
}

const fullSc = (componentName, componentParams, moduleType) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.dialogTitle = componentParams.dialogTitle;
  switch (componentName) {
    case 'lineBar': // bar&line图
      magnifyData.value.props = {
        lineBarData: componentParams,
        class: moduleType === 'right5Chart' ? 'h180 dialog-h180' : 'h280 dialog-h280'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'singleBar': // single-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h291 dialog-h291'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'multipleBar': // multiple-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h291 dialog-h291'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
}

const getHousePropertyDevelopmentInvestmentData = () => { // 房地产开发投资-getdata
  constructionGetReInvestment({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.housePropertyDevelopmentInvestment
  }).then(res => {
    housePropertyDevelopmentInvestmentData.value.sum = ''
    housePropertyDevelopmentInvestmentData.value.tb = ''
    housePropertyDevelopmentInvestmentData.value.xAxisData = []
    housePropertyDevelopmentInvestmentData.value.barData = []
    housePropertyDevelopmentInvestmentData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      housePropertyDevelopmentInvestmentData.value.sum = resData.ljje
      housePropertyDevelopmentInvestmentData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        housePropertyDevelopmentInvestmentData.value.xAxisData = resData?.month
        housePropertyDevelopmentInvestmentData.value.barData = resData?.valueList
        housePropertyDevelopmentInvestmentData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (housePropertyDevelopmentInvestmentRef.value) {
      housePropertyDevelopmentInvestmentRef.value.updateChart();
    }
  })
}

const getCommodityHouseDevelopmentInvestmentData = () => { // 其中商品住宅开发投资-getdata
  constructionGetHouseReInvestment({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.commodityHouseDevelopmentInvestment
  }).then(res => {
    commodityHouseDevelopmentInvestmentData.value.sum = ''
    commodityHouseDevelopmentInvestmentData.value.tb = ''
    commodityHouseDevelopmentInvestmentData.value.xAxisData = []
    commodityHouseDevelopmentInvestmentData.value.barData = []
    commodityHouseDevelopmentInvestmentData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      commodityHouseDevelopmentInvestmentData.value.sum = resData.ljje
      commodityHouseDevelopmentInvestmentData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        commodityHouseDevelopmentInvestmentData.value.xAxisData = resData?.month
        commodityHouseDevelopmentInvestmentData.value.barData = resData?.valueList
        commodityHouseDevelopmentInvestmentData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (commodityHouseDevelopmentInvestmentRef.value) {
      commodityHouseDevelopmentInvestmentRef.value.updateChart();
    }
  })
}

const getHouseNewlyStartedAcreageData = () => { // 房屋新开工面积-getdata
  constructionGetNewStartedArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.houseNewlyStartedAcreage
  }).then(res => {
    houseNewlyStartedAcreageData.value.sum = ''
    houseNewlyStartedAcreageData.value.tb = ''
    houseNewlyStartedAcreageData.value.xAxisData = []
    houseNewlyStartedAcreageData.value.barData = []
    houseNewlyStartedAcreageData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      houseNewlyStartedAcreageData.value.sum = resData.ljje
      houseNewlyStartedAcreageData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        houseNewlyStartedAcreageData.value.xAxisData = resData?.month
        houseNewlyStartedAcreageData.value.barData = resData?.valueList
        houseNewlyStartedAcreageData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (houseNewlyStartedAcreageRef.value) {
      houseNewlyStartedAcreageRef.value.updateChart();
    }
  })
}

const getCommodityHouseNewlyStartedAcreageData = () => { // 其中商品住宅新开工面积-getdata
  constructionGetHouseNewStartedArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.commodityHouseNewlyStartedAcreage
  }).then(res => {
    commodityHouseNewlyStartedAcreageData.value.sum = ''
    commodityHouseNewlyStartedAcreageData.value.tb = ''
    commodityHouseNewlyStartedAcreageData.value.xAxisData = []
    commodityHouseNewlyStartedAcreageData.value.barData = []
    commodityHouseNewlyStartedAcreageData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      commodityHouseNewlyStartedAcreageData.value.sum = resData.ljje
      commodityHouseNewlyStartedAcreageData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        commodityHouseNewlyStartedAcreageData.value.xAxisData = resData?.month
        commodityHouseNewlyStartedAcreageData.value.barData = resData?.valueList
        commodityHouseNewlyStartedAcreageData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (commodityHouseNewlyStartedAcreageRef.value) {
      commodityHouseNewlyStartedAcreageRef.value.updateChart();
    }
  })
}

const getHouseConstructionAcreageData = () => { // 房屋施工面积-getdata
  constructionGetConstructionArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.houseConstructionAcreage
  }).then(res => {
    houseConstructionAcreageData.value.sum = ''
    houseConstructionAcreageData.value.tb = ''
    houseConstructionAcreageData.value.xAxisData = []
    houseConstructionAcreageData.value.barData = []
    houseConstructionAcreageData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      houseConstructionAcreageData.value.sum = resData.ljje
      houseConstructionAcreageData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        houseConstructionAcreageData.value.xAxisData = resData?.month
        houseConstructionAcreageData.value.barData = resData?.valueList
        houseConstructionAcreageData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (houseConstructionAcreageRef.value) {
      houseConstructionAcreageRef.value.updateChart();
    }
  })
}

const getCommodityHouseConstructionAcreageData = () => { // 其中商品住宅施工面积-getdata
  constructionGetHouseConstructionArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.commodityHouseConstructionAcreage
  }).then(res => {
    commodityHouseConstructionAcreageData.value.sum = ''
    commodityHouseConstructionAcreageData.value.tb = ''
    commodityHouseConstructionAcreageData.value.xAxisData = []
    commodityHouseConstructionAcreageData.value.barData = []
    commodityHouseConstructionAcreageData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      commodityHouseConstructionAcreageData.value.sum = resData.ljje
      commodityHouseConstructionAcreageData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        commodityHouseConstructionAcreageData.value.xAxisData = resData?.month
        commodityHouseConstructionAcreageData.value.barData = resData?.valueList
        commodityHouseConstructionAcreageData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (commodityHouseConstructionAcreageRef.value) {
      commodityHouseConstructionAcreageRef.value.updateChart();
    }
  })
}

const getHouseCompletedAcreageData = () => { // 房屋竣工面积-getdata
  constructionGetCompletedArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.houseCompletedAcreage
  }).then(res => {
    houseCompletedAcreageData.value.sum = ''
    houseCompletedAcreageData.value.tb = ''
    houseCompletedAcreageData.value.xAxisData = []
    houseCompletedAcreageData.value.barData = []
    houseCompletedAcreageData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      houseCompletedAcreageData.value.sum = resData.ljje
      houseCompletedAcreageData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        houseCompletedAcreageData.value.xAxisData = resData?.month
        houseCompletedAcreageData.value.barData = resData?.valueList
        houseCompletedAcreageData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (houseCompletedAcreageRef.value) {
      houseCompletedAcreageRef.value.updateChart();
    }
  })
}

const getCommodityHouseCompletedAcreageData = () => { // 其中商品住宅竣工面积-getdata
  constructionGetHouseCompletedArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.commodityHouseCompletedAcreage
  }).then(res => {
    commodityHouseCompletedAcreageData.value.sum = ''
    commodityHouseCompletedAcreageData.value.tb = ''
    commodityHouseCompletedAcreageData.value.xAxisData = []
    commodityHouseCompletedAcreageData.value.barData = []
    commodityHouseCompletedAcreageData.value.lineData = []
    if (res && res.data) {
      const resData = res.data
      commodityHouseCompletedAcreageData.value.sum = resData.ljje
      commodityHouseCompletedAcreageData.value.tb = resData.ljtb
      if (resData?.month?.length) {
        commodityHouseCompletedAcreageData.value.xAxisData = resData?.month
        commodityHouseCompletedAcreageData.value.barData = resData?.valueList
        commodityHouseCompletedAcreageData.value.lineData = resData?.tbList?.map((x, i) => {
          return {
            value: x,
            hb: resData?.hbList?.[i]
          }
        })
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (commodityHouseCompletedAcreageRef.value) {
      commodityHouseCompletedAcreageRef.value.updateChart();
    }
  })
}

const getEveryCityHousePropertyDevelopmentInvestmentDataSummarizationData = () => { // 各城市房地产开发投资数据汇总-getdata
  constructionGetCityReInvestment({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
  }).then(res => {
    everyCityHousePropertyDevelopmentInvestmentDataSummarizationData.value.xAxisData = []
    everyCityHousePropertyDevelopmentInvestmentDataSummarizationData.value.seriesData = []
    if (res && res.data) {
      const resData = res.data
      if (resData?.nameList?.length) {
        everyCityHousePropertyDevelopmentInvestmentDataSummarizationData.value.xAxisData = resData?.nameList || []
        everyCityHousePropertyDevelopmentInvestmentDataSummarizationData.value.seriesData = resData?.valueList || []
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (everyCityHousePropertyDevelopmentInvestmentDataSummarizationRef.value) {
      everyCityHousePropertyDevelopmentInvestmentDataSummarizationRef.value.updateChart();
    }
  })
}

const getEveryCityHouseDevelopmentDataSummarizationData = () => { // 各城市房屋施工数据汇总-getdata
  constructionGetCityConstructionArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0] || undefined,
    endTime: monthRange.value[1] || undefined,
    requestType: tabConfig.value.everyCityHouseDevelopmentDataSummarization
  }).then(res => {
    everyCityHouseDevelopmentDataSummarizationData.value.xAxisData = []
    everyCityHouseDevelopmentDataSummarizationData.value.barData = []
    if (res && res.data) {
      const resData = res.data
      if (resData?.nameList?.length) {
        everyCityHouseDevelopmentDataSummarizationData.value.xAxisData = resData?.nameList
        everyCityHouseDevelopmentDataSummarizationData.value.barData.push(resData?.xkgList)
        everyCityHouseDevelopmentDataSummarizationData.value.barData.push(resData?.sgList)
        everyCityHouseDevelopmentDataSummarizationData.value.barData.push(resData?.jgList)
      }
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (everyCityHouseDevelopmentDataSummarizationRef.value) {
      everyCityHouseDevelopmentDataSummarizationRef.value.updateChart();
    }
  })
}

const initPage = () => {
  getHousePropertyDevelopmentInvestmentData() // 房地产开发投资
  getCommodityHouseDevelopmentInvestmentData() // 其中商品住宅开发投资

  getHouseNewlyStartedAcreageData() // 房屋新开工面积
  getCommodityHouseNewlyStartedAcreageData() // 其中商品住宅新开工面积
  getHouseConstructionAcreageData() // 房屋施工面积
  getCommodityHouseConstructionAcreageData() // 其中商品住宅施工面积
  getHouseCompletedAcreageData() // 房屋竣工面积
  getCommodityHouseCompletedAcreageData() // 其中商品住宅竣工面积

  getEveryCityHousePropertyDevelopmentInvestmentDataSummarizationData() // 各城市房地产开发投资数据汇总
  getEveryCityHouseDevelopmentDataSummarizationData() // 各城市房屋施工数据汇总
}

onMounted(() => {
  if (route && route.query) {
    cityObj.value.code = route.query?.xzqhdm
    monthRange.value = [route.query?.startTime, route.query?.endTime]
  }
  initPage();
})
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 35px;
      color: #A6EDFF;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    &-filtrate {
      position: relative;
      display: flex;
      align-items: center;
      top: 15px;
      left: 150px;

      .filtrate-city {
        width: 120px;

        /deep/ .el-select__wrapper {
          font-size: 15px;
        }

        margin-right: 30px;
      }

      .page-header-filtrate-month-range {
        /deep/ .el-range-input, /deep/ .el-range-separator {
          font-size: 15px;
          font-weight: lighter;
        }
      }
    }

    .back-home-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;

    > .el-row:first-child {
      margin-bottom: 20px;
    }

    .module-item {
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 40px;
        }

        &-tabs {
          position: absolute;
          right: 50px;
        }
      }

      &-content {
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;
      }
    }

    .house-property-development-investment,
    .commodity-house-development-investment {
      width: 100%;
      height: 300px;
    }

    .bottom-content {
      .el-row {
        margin-bottom: 20px;
      }

      .every-city-house-property-development-investment-data-summarization,
      .every-city-house-development-data-summarization {
        height: 311px;
      }

      &-right {
        .module-item {
          //height: 200px;
          &-content {
            height: 180px;
          }
        }
      }
    }
  }
}

:deep(.el-tabs) {
  display: flex;
  align-items: center;

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__nav-wrap:after {
    height: 0;
  }

  .el-tabs__active-bar {
    height: 0;
  }

  .el-tabs__item {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 12px;
    height: 20px;
    cursor: pointer;
    color: white;
    background: rgb(9, 31, 63);
  }

  .el-tabs__item.is-active {
    background: #2187F4;
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__title {
    font-size: 30px;
    color: white;
  }

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>